<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 项目名称 -->
          <a-input
            placeholder="请输入项目名称"
            v-model="condition.proName"
          ></a-input>
          <!-- 项目编号 -->
          <a-input
            placeholder="请输入项目编号"
            v-model="condition.proCode"
          ></a-input>
          <!-- 工程类型 -->
          <a-select
            showSearch
            allowClear
            placeholder="请选择工程类型"
            :loading="condition.typeLoading"
            :filter-option="filterOption"
            v-model="condition.engType"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in condition.typeSource"
              :key="item.uuid"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <!-- 省市县 -->
          <a-cascader
            class="workArea-select"
            :options="condition.provinceSource"
            :field-names="{
              label: 'name',
              value: 'name',
              children: 'children',
            }"
            @change="search()"
            placeholder="请选择省市县"
            v-model="condition.workArea"
          />
          <!-- 项目状态 -->
          <a-select
            showSearch
            allowClear
            placeholder="请选择项目状态"
            :loading="condition.proStatusLoading"
            :filter-option="filterOption"
            v-model="condition.proStatus"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in condition.proStatusSource"
              :key="item.uuid"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <!-- 项目等级 -->
          <a-select
            showSearch
            allowClear
            placeholder="请选择项目等级"
            :loading="condition.proLevelLoading"
            :filter-option="filterOption"
            v-model="condition.proLevel"
            @change="search()"
          >
            <a-select-option
              :value="item.dicItemCode"
              v-for="item in condition.proLevelSource"
              :key="item.uuid"
            >
              {{ item.dicItemName }}
            </a-select-option>
          </a-select>
          <!-- 项目规模 -->
          <a-input
            placeholder="请输入项目规模"
            v-model="condition.constructionScale"
          ></a-input>
          <!-- 项目来源 -->
          <a-select
            showSearch
            allowClear
            placeholder="请选择项目来源"
            :filter-option="filterOption"
            v-model="condition.source"
            @change="search()"
          >
            <a-select-option :value="1">
              自建
            </a-select-option>
            <a-select-option :value="2">
              ERP
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <!-- <div class="table-operate">
        <a-button
          @click="handleAddModal({}, 1)"
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
        >
          新增
        </a-button>
      </div> -->
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="left"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column
            type="seq"
            width="80"
            title="序号"
            align="center"
          ></vxe-column>
          <vxe-column field="proName" min-width="200" title="项目名称">
          </vxe-column>
          <vxe-column field="engTypeDesc" width="150" title="工程类型">
          </vxe-column>
          <vxe-column field="workArea" width="220" title="省市县">
            <template #default="{ row }">
              {{ replaceStr(row.workArea) }}
            </template>
          </vxe-column>
          <vxe-column field="proStatusDesc" width="150" title="项目状态">
            <!-- <template #default="{ row }">
              <div class="status-td">
                未开始
              </div>
            </template> -->
          </vxe-column>
          <vxe-column field="proLevelDesc" width="150" title="项目等级">
          </vxe-column>
          <vxe-column field="constructionScale" width="150" title="项目规模">
          </vxe-column>
          <vxe-column field="source" width="200" title="项目来源"> </vxe-column>
          <vxe-column field="createTime" width="200" title="创建时间">
          </vxe-column>
          <vxe-column field="" width="150" title="关联ERP">
            <template #default="{ row }">
              <div
                class="associated-td"
                :class="associatedClass(row.associatedType)"
              >
                {{ associatedName(row.associatedType) }}
              </div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="80"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row,rowIndex }">
              <div class="text-button-group">
                <!-- 关联ERP项目 -->
                <a-tooltip
                  placement="top"
                  v-if="row.associatedType != 0 && row.associatedType != 2"
                >
                  <template slot="title">
                    关联ERP项目
                  </template>
                  <icon-font
                    @click="handleAssociatedModal(row)"
                    class="guanlian-btn "
                    :class="!row.proId && 'guanlian'"
                    type="icon-guanlian1"
                  ></icon-font>
                </a-tooltip>
                <a-tooltip placement="top">
                  <template slot="title">
                    查看
                  </template>
                  <a-icon
                    type="file-search"
                    @click="handleAddModal({ ...row, index: rowIndex }, 3)"
                  />
                </a-tooltip>
                <!-- <a-tooltip>
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon
                    type="edit"
                    @click="handleAddModal({ ...row, index: rowIndex }, 2)"
                  />
                </a-tooltip> -->
                <!-- <a-tooltip>
                  <template slot="title">
                    删除
                  </template>
                  <a-icon type="delete" @click="deleteForm(row, rowIndex)" />
                </a-tooltip> -->
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 新增、编辑 -->
    <addModal
      :visible.sync="addModal.visible"
      :row="addModal.row"
      :operateType="addModal.operateType"
    ></addModal>
    <!-- 关联ERP -->
    <associatedModal
      :visible.sync="associatedModal.visible"
      :row="associatedModal.row"
    ></associatedModal>
  </div>
</template>
<script>
import areaData from "@/components/_utils/area-json.js";
import { axios } from "@/utils/request";
import { getDicItemByCode } from "@/api/common.js";
//合同分解
import { _getUUID } from "@/utils/util.js";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import { deleteContractDecompose } from "@/api/cantonManage";
//新增
import addModal from "./components/addModal.vue";
//关联ERP
import associatedModal from "./components/associatedModal.vue";
//字体图标
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
export default {
  components: {
    IconFont,
    ScreenConditions,
    addModal,
    associatedModal,
  },
  data() {
    return {
      //查询条件
      condition: {
        //项目名称
        proName: "",
        //项目编号
        proCode: "",
        //工程类型
        typeLoading: false,
        typeSource: [],
        engType: undefined,
        //省市县
        workArea: [],
        provinceSource: areaData,
        //项目状态
        proStatusSource: [],
        proStatus: undefined,
        proStatusLoading: false,
        //项目等级
        proLevelSource: [],
        proLevel: undefined,
        proLevelLoading: false,
        //项目规模
        constructionScale: "",
        //项目来源
        source: undefined,
      },
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      // 新增/编辑/查看
      addModal: {
        visible: false,
        row: {},
        operateType: 1,
      },
      //关联ERP
      associatedModal: {
        visible: false,
        row: {},
      },
    };
  },
  mounted() {
    this.getEngTypeData();
    this.getProStatusData();
    this.getProLevelData();
    this.getTableData();
  },
  methods: {
    associatedName(type) {
      switch (Number(type)) {
        case 0:
          return "无需关联";

        case 1:
          return "未关联";

        case 2:
          return "已关联";

        default:
          break;
      }
    },

    associatedClass(type) {
      switch (Number(type)) {
        case 0:
          return "no-associated";

        case 1:
          return "un-associated";

        case 2:
          return "associated";

        default:
          break;
      }
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        proName,
        proCode,
        engType,
        workArea,
        proStatus,
        proLevel,
        constructionScale,
        source,
      } = this.condition;
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/mdata/sysProject/getPageSet?pageNo=${page}&pageSize=${pageSize}`,
            {
              proName,
              proCode,
              engType,
              workArea: workArea.join("@"),
              proStatus,
              proLevel,
              constructionScale,
              source,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { rows, totalCount } = res;
            this.tableData = rows || [];
            this.pager.total = totalCount;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //查询工程类型
    getEngTypeData() {
      this.condition.typeLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "engineeringType" })
          .then((res) => {
            let { data } = res;
            this.condition.typeSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.typeSource = [];
            reject();
          })
          .finally((_) => {
            this.condition.typeLoading = false;
          });
      });
    },

    //查询项目状态
    getProStatusData() {
      this.condition.proStatusLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "proStatus" })
          .then((res) => {
            let { data } = res;
            this.condition.proStatusSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.proStatusSource = [];
            reject();
          })
          .finally((_) => {
            this.condition.proStatusLoading = false;
          });
      });
    },

    //查询项目等级
    getProLevelData() {
      this.condition.proLevelLoading = true;
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: "proLevel" })
          .then((res) => {
            let { data } = res;
            this.condition.proLevelSource = data ?? [];
            resolve();
          })
          .catch((_) => {
            this.condition.proLevelSource = [];
            reject();
          })
          .finally((_) => {
            this.condition.proLevelLoading = false;
          });
      });
    },

    //
    replaceStr(str) {
      return str.replace(/@/g, ">");
    },

    // 新增/编辑/查看
    handleAddModal(row, type) {
      this.addModal.operateType = type;
      this.addModal.row = row;
      this.addModal.visible = true;
    },

    //关联ERP
    handleAssociatedModal(row) {
      if (row.associatedType == 1) {
        this.associatedModal.row = row;
        this.associatedModal.visible = true;
      } else {
        //解除关联
        this.handleDisassociate(row);
      }
    },

    //解除关联
    handleDisassociate(row) {
      let dataLength = this.tableData.length;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "确定解除关联吗？解除之后不可恢复！",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          deleteContractDecompose({ uuid: row.uuid })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("解除成功", 1.5);
                if (dataLength == 1 && that.pager.page > 1) {
                  that.pager.page -= 1;
                }
                that.getTableData();
              } else {
                that.$message.error(res.message);
              }
            })
            .catch((_) => {});
        },
      });
    },

    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //重置
    reset() {
      this.condition.proName = "";
      this.condition.proCode = "";
      this.condition.engType = undefined;
      this.condition.workArea = [];
      this.condition.proStatus = undefined;
      this.condition.proLevel = undefined;
      this.condition.constructionScale = "";
      this.condition.source = undefined;
      this.search();
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-tablePage-container {
  .screen-conditions-container {
    /deep/.workArea-select {
      width: 260px !important;
      margin-right: 16px;
      .ant-input {
        width: 260px !important;
      }
      .ant-cascader-picker-label {
        height: 32px;
        margin: 0;
        top: 0;
        line-height: 32px;
      }
      .anticon {
        margin-top: -10px;
      }
    }
  }
  .table-body-container {
    .status-td {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;
      &::before {
        content: "";
        width: 8px;
        height: 8px;
        background: #8c8c8c;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
    .associated-td {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #1890ff;
      &::before {
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 8px;
      }
      //关联
      &.associated {
        &::before {
          background: url("~@/assets/img/icon_24.png");
          background-size: 100% 100%;
        }
      }

      //未关联
      &.un-associated {
        &::before {
          background: url("~@/assets/img/icon_25.png");
          background-size: 100% 100%;
        }
      }

      //无需关联
      &.no-associated {
        color: #89898b;
        opacity: 0.8;
        &::before {
          background: url("~@/assets/img/icon_26.png");
          background-size: 100% 100%;
        }
      }
    }
    .guanlian-btn {
      color: #c652f0;
      font-size: 20px;
      &.guanlian {
        font-size: 18px;
        color: #00c1b6;
      }
    }
  }
}
</style>
